<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>访问时长</title>
</head>
<body>
<div th:replace="~{common/leftnavbar::leftnav}"></div>
<div class="layui-body" id="container" style="width: 1250px;height:550px;margin:0 auto;">
    <!--<div style="weight:700px;height:700px;" id="container"></div>-->
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var xDataArr = ["1s~3s", "4s~6s", "7s~9s", "10s~30s", "30s~60s", "1m~3m", "3m~10m", "10m~30m", "30m以上"]
    var temp = []
    axios.post('/at')
        .then(function (res) {
            data = Object.values(res.data)
            for (var i = 0; i < data.length; i++) {
                temp.push(data[i].visit_length_1s_3s_ratio);
                temp.push(data[i].visit_length_4s_6s_ratio);
                temp.push(data[i].visit_length_7s_9s_ratio);
                temp.push(data[i].visit_length_10s_30s_ratio);
                temp.push(data[i].visit_length_30s_60s_ratio);
                temp.push(data[i].visit_length_1m_3m_ratio);
                temp.push(data[i].visit_length_3m_10m_ratio);
                temp.push(data[i].visit_length_10m_30m_ratio);
                temp.push(data[i].visit_length_30m_ratio);
            }
            myChart.setOption(option)

        })
        .catch(function (error) {
            console.log(error);
        });
    var option = {
        title:{
            text: '访问时长'
        },
        xAxis: {
            name:'session时间',
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            name:'百分比',
            type: 'value'
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        tooltip: {
            trigger: 'axis', // 使用坐标轴触发提示
            axisPointer: {
                type: 'cross' // 使用十字准星指示器
            }
        },
        series: [
            {
                type: 'bar',
                data: temp,
                itemStyle: {
                    // 设置线条上点的颜色（和图例的颜色）
                    normal: {
                        color: '#5bc2e7',
                    },
                }
            }
        ]
    }



    function accessfunc() {
        if (document.getElementById("access").getAttribute("class") == "layui-nav-item layui-nav-itemed") {
            document.getElementById("access").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }

    function categoryfunc() {
        if (document.getElementById("category").getAttribute("class") == "layui-nav-item layui-nav-itemed") {
            document.getElementById("category").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("category").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }

    document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
</script>
</html>
